<template>
  <div class="view-container">
    <header-module
      :left-custom="true"
      :padding="true"
    >
      <template #left-con>
        <div v-if="distributorInfo">
          <span style="font-size: 16px; margin-right: 20px">商销客户
            {{ distributorInfo.distributeName }}</span>
          <!--
          <el-tag
            type="warning"
            size="small"
          >
            <div style="display:flex;align-items:center;">
              <div>{{ getLabel('distributor_status',distributorInfo.disStatus) }}</div>
              <div
                v-if="distributorInfo.disStatus==='2'"
                style="margin-left:5px;"
              >
                <span v-if="distributorInfo.isDistributeServer">[ 无配送服务 ]</span>
                <span v-if="distributorInfo.isDistributeTerminal">[ 无配送终端 ]</span>
                <span v-if="distributorInfo.isChange">[ 变更审核中 ]</span>
              </div>
            </div>
          </el-tag>
          -->
        </div>
      </template>
      <template #btn>
        <el-button
          class="border-btn"
          size="small"
          @click="back"
        >返回</el-button>
      </template>
    </header-module>
    <div class="main-content">
      <distributor-info :detail="distributorInfo" />
    </div>
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  inject,
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  components: {
    distributorInfo: defineAsyncComponent(() =>
      import(
        '@CRM/views/commonView/detailComponents/distributor/distributorInfo.vue'
      )
    ),
  },
  setup(props, context) {
    const router = useRouter()
    const route = useRoute()
    const api = inject('api')
    var activeName = ref('1')
    var reactiveData = reactive({
      distributorId: Number(route.query.id),
      statusType: 'success',
      distributorInfo: null,
    })

    const back = () => {
      router.back()
    }
    const tabClick = (val) => {
      console.log(val)
    }
    const getDetail = () => {
      api.distributors
        .DISTRIBUTORS_DETAIL({ id: reactiveData.distributorId })
        .then((res) => {
          if (res.code === 0) {
            reactiveData.distributorInfo = res.data.DistributeInfo || null
            if (reactiveData.distributorInfo.disStatus === '-1') {
              reactiveData.statusType = 'danger'
            } else if (reactiveData.distributorInfo.disStatus === '1') {
              reactiveData.statusType = 'warning'
            }
          }
        })
    }
    const refreshDetail = () => {
      getDetail()
    }

    onMounted(() => {
      getDetail()
    })

    return {
      activeName,
      ...toRefs(reactiveData),
      back,
      tabClick,
      refreshDetail,
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
